<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="tui-header" :style="{ paddingTop: top + 'px'}">来喝茶吧茶室</view>
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="back">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
				</view>

				<view class="tui-icon-box tui-icon-ml" :style="{backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')'}"
					@tap.stop="openMenu">
					<tui-icon name="more-fill" :size="20" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
					<tui-badge type="red" :scaleRatio="0.8" absolute top="0" right="-4rpx">5</tui-badge>
				</view>

			</view>
		</view>
		<!--header-->
		<!--banner-->
		<view class="tui-banner-box">
			<view class="tui-banner-swiper">
				<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" @change="bannerChange"
					:style="{ height: scrollH + 'px' }">
					<block v-for="(item, index) in banner" :key="index">
						<swiper-item :data-index="index" @tap.stop="previewImage">
							<image :src="item" class="tui-slide-image" :style="{ height: scrollH + 'px' }" />
						</swiper-item>
					</block>
				</swiper>
				<tui-swiper-dot :type="1" width="20px" height="6px" radius="10px" bottom="80rpx" :count="count"
					:current="current" />
			</view>
			<!--search bar-->
			<view class="tui-search-bar">
				<view class="tui-search-box">
					<view class="tui-address" hover-class="opcity" :hover-stay-time="150">
						<view class="tui-address-scale">青岛市</view>
						<tui-icon name="arrowdown" color="#fff" :size="44" unit="rpx"></tui-icon>
					</view>
					<view class="tui-search">
						<tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
					</view>
				</view>
			</view>
			<!--search bar-->
		</view>
		<!--banner-->
		<!--invite-->
		<view class="tui-invite-bar">
			<view class="tui-invite-box">
				<view class="tui-address" hover-class="opcity" :hover-stay-time="150">
					<view class="tui-address-scale">青岛市</view>
					<tui-icon name="arrowdown" color="#fff" :size="44" unit="rpx"></tui-icon>
				</view>
				<view class="tui-search">
					<tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
				</view>
			</view>
		</view>
		<!--invite-->
		
		<view class="tui-product-box">
			<view class="tui-title">
				青岛市的门店
			</view>
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item, index) in productList" :key="index">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail">
							<image :src="'/static/images/mall/product/' + item.img + '.jpg'" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-basice">
									<view class="tui-pro-tit">{{ item.name }}</view>
									<text class="tui-pro-price">￥{{ item.sale }}<text class="min-price">.0起</text></text>
								</view>
								<view class="tui-style">
									<view class="tui-rate">
										<tui-rate :size="15" :current="5" />
									</view>
									<view class="tui-min-order">
										2小时起订
									</view>
								</view>
								<view class="tui-feature">
									<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">停车场</tui-tag>
									<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">会议室</tui-tag>
									<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">有投影</tui-tag>
									<tui-tag type="btn-gray" margin="0rpx 10rpx 0rpx 0rpx"  padding="8rpx" size="22rpx">白板</tui-tag>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				banner: [
					'https://www.thorui.cn/img/product/11.jpg',
					'https://www.thorui.cn/img/product/2.png',
					'https://www.thorui.cn/img/product/33.jpg',
					'https://www.thorui.cn/img/product/4.png',
					'https://www.thorui.cn/img/product/55.jpg',
					'https://www.thorui.cn/img/product/6.png',
					'https://www.thorui.cn/img/product/7.jpg',
					'https://www.thorui.cn/img/product/8.jpg'
				],
				current: 0,
				count: 0,
				productList: [{
						img: 1,
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 2,
						name: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 3,
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 4,
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					},
					{
						img: 5,
						name: '百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 6,
						name: '短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 1,
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 2,
						name: '德国DMK进口牛奶',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 3,
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 4,
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					}
				],
				
			}
		},
		onLoad(options) {
			this.count = this.banner.length;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif

			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
					}
				});
			}, 0);
		},
		methods: {
			bannerChange: function(e) {
				this.current = e.detail.current;
			},
			detail: function() {
				uni.navigateTo({
					url: '/pages/shop/index'
				});
			},
		}
	}
</script>

<style style='scss'>
	page {
		background-color: #f7f7f7;
	}
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}

	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 700;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: azure;
		font-family: 'Microsoft YaHei', sans-serif;
	}

	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.tui-banner-box {
		position: relative;
		margin-bottom: 100rpx;
	}

	.tui-search-bar {
		position: absolute;
		left: 0;
		bottom: -50rpx;
		z-index: 999;
		width: 100%;
	}

	.tui-search-box {
		margin: 0rpx 15rpx;
		padding: 0 20rpx;
		height: 100rpx;
		box-sizing: border-box;
		background-color: #e41f19;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: opacity .4s;
	}

	.tui-banner-swiper {
		position: relative;
	}

	.tui-search {
		width: 100%;
		height: 60rpx;
		border-radius: 15rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	.tui-address {
		font-size: 42rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}
	.tui-address-scale {
		transform: scale(0.7);
		line-height: 24rpx;
	}
	.tui-invite-bar{
		width: 100%;
	}
	.tui-invite-box{
		margin: 0rpx 15rpx;
		padding: 0 20rpx;
		height: 100rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: opacity .4s;
	}
	
	
	
	.tui-product-box {
		margin-top: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.tui-pro-img {
		width: 100%;
		display: block;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.tui-basice{
		display: flex;
		justify-content: space-between;
	}
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.tui-pro-price {
		padding-top: 0rpx;
		font-size: 32rpx;
		flex:0 0 auto;
	}
	.min-price{
		font-size: 24rpx;
	}
	.tui-style{
		margin-top: 15rpx;
		display: flex;
		align-items: center;
	}
	.tui-rate{
		
	}
	.tui-min-order{
		padding-left: 15rpx;
		font-size: 28rpx;
		color: #999;
	}
	.tui-feature{
		margin-top: 15rpx;
		display: flex;
	}
</style>